<template>
	<div class="group-post-details maxW">
		<div class="crumbs-link">
			<span @click="goback()">帖子列表</span>
			<strong>
				<i>></i>帖子详情</strong>
			<!-- <a target="_blank" :href="`${BASE_URL}:8083/login/${Global.access_token}/${BASE_URL}/group/postDetails?id=7`">详1111111情</a> -->
		</div>
		<div class="post-details-content">
			<div class="post-details-l">
				<div class="post-content-box">
					<h2>{{post_info_data.title}}</h2>
					<div class="post-creater-info clear">
						<img v-if="post_info_data.avatar_path !== ''" class="post-person-img" :src="BASE_URL + post_info_data.avatar_path">
						<img class="post-person-img" v-else src="../../../../public/images/Group9.png">
						<span class="post-creater-name fl">{{post_info_data.create_name}}</span>
						<span class="post-creater-time fl">{{post_info_data.create_time}}</span>
					</div>
					<div class="post-text-content" v-html="post_info_data.content"></div>
					<div class="read-box clear">
						<span class="fl"><i>阅读</i><i>{{post_info_data.clicks}}</i></span>
						<span class="fr"><i :class="post_info_data.is_fav==0?'ipm p-pride-img':'ipm p-pride-img1'" @click="to_praise(post_info_data.id,0)"></i><i>{{post_info_data.fav_num}}</i></span>
					</div>
					<div class="post-discuss-area">
						<div class="discuss-area-tit">
							留言讨论区
						</div>
						<i class="discuss-tips-img"></i>
						<div class="discuss-area-content">
							<div class="discuss-area-textarea">
								<el-input type="textarea" :rows="5" resize="none" placeholder="友善讨论，互相鼓励，言之有物，互相学习" v-model.trim="discussWords0">
								</el-input>
								<span>
									<i>{{textareaLen0}}</i>/140</span>
							</div>
							<div class="discuss-express-btns clear">
								<div class="emoji_ch box">
									<img @click="emojiOFF(0)" src="../../../../public/images/emojim.png" class="emoji_icon">
									<vueEmoji class="vueEmoji" @select="selectEmoji" v-if="showEmoji"></vueEmoji>
								</div>
								<el-button type="primary" @click="post_words(post_info_data.id,0)">发表观点</el-button>
							</div>
						</div>
					</div>

					<div class="post-discuss-content">
						<ul>
							<li class="post-discuss-li" v-for="(item, index) in discuss_data" :key="index">
								<div class="post-author-info">
									<div class="post-author post-person">
										<router-link to="###">
											<img class="post-person-img" :src="BASE_URL + item.avatar_path" v-if="item.avatar_path !== ''">
											<img class="post-person-img" v-else src="../../../../public/images/Group9.png">
										</router-link>
										<span class="post-a-name">{{item.create_name}}</span>
										<span class="post-a-time">{{item.create_time}}</span>
									</div>
									<div class="post-person-word post-a-word">
										<p v-html="emoji(item.content)"></p>
									</div>
									<div class="post-person-handle">
										<span>
											<i v-if="item.is_fav==0" class="ipm p-pride-img" @click="to_praise(item.id)"></i>
											<i v-if="item.is_fav==1" class="ipm p-pride-img1" @click="to_praise(item.id)"></i>
											<i :class="item.fav_num==0?'p-pride-count1':'p-pride-count0'">{{item.fav_num}}</i>
										</span>
										<span v-if="item.create_id!=user_login_id">
											<i class="ipm p-info-img" @click="show_index(item.id)"></i>
										</span>
										<span>
											<i v-if="item.create_id==user_login_id||delFlag" class="el-icon-delete p-del" @click="del_your_words(item.id)"></i>
										</span>
									</div>
									<!-- <el-collapse-transition> -->
									<div class="discuss-area-content" v-show="show3 == item.id">
										<div class="discuss-area-textarea">
											<el-input type="textarea" :rows="5" resize="none" placeholder="友善讨论，互相鼓励，言之有物，互相学习" v-model.trim="discussWords">
											</el-input>
											<span>
												<i>{{textareaLen}}</i>/140</span>
										</div>
										<div class="discuss-express-btns clear">
											<div class="emoji_ch box post_l1_emoji fr">
												<img @click="emojiOFF(1)" src="../../../../public/images/emojim.png" class="emoji_icon">
												<vueEmoji class="vueEmoji" @select="selectEmoji" v-if="r_showEmoji"></vueEmoji>
											</div>
											<el-button type="primary" @click="post_words(item.id,1)">回复</el-button>
										</div>
									</div>
									<!-- </el-collapse-transition> -->
								</div>
								<template>
									<ul>
										<li v-for="(item1, index1) in item.children" :key="index1">
											<div class="post-reviewer-info">
												<div class="post-reviewer post-person clear">
													<router-link to="###">
														<img class="post-person-img" :src="BASE_URL + item1.avatar_path" v-if="item1.avatar_path !== ''">
														<img class="post-person-img" v-else src="../../../../public/images/user_preview-1.png">
													</router-link>
													<span class="post-r-name">{{item1.create_name}}</span>
													<span class="post-r-time fr">{{item1.create_time}}</span>
												</div>
												<div class="post-person-word post-r-word">
													<p v-html="emoji(item1.content)"></p>
												</div>
												<div class="post-person-handle">
													<span>
														<i v-if="item1.is_fav==0" class="ipm p-pride-img" @click="to_praise(item1.id)"></i>
														<i v-if="item1.is_fav==1" class="ipm p-pride-img1" @click="to_praise(item1.id)"></i>
														<i :class="item1.fav_num==0?'p-pride-count1':'p-pride-count0'">{{item1.fav_num}}</i>
													</span>
													<span v-if="item1.create_id!=user_login_id">
														<i class="ipm p-info-img" @click="show_index(item1.id)"></i>
													</span>
													<span>
														<i v-if="item1.create_id==user_login_id||delFlag" class="el-icon-delete p-del" @click="del_your_words(item1.id)"></i>
													</span>
												</div>
												<!-- <el-collapse-transition> -->
												<div class="discuss-area-content" v-show="show3 == item1.id">
													<div class="discuss-area-textarea">
														<el-input type="textarea" :rows="5" resize="none" placeholder="友善讨论，互相鼓励，言之有物，互相学习" v-model.trim="discussWords">
														</el-input>
														<span>
															<i>{{textareaLen}}</i>/140</span>
													</div>
													<div class="discuss-express-btns clear">
														<div class="emoji_ch box fr">
															<img @click="emojiOFF(1)" src="../../../../public/images/emojim.png" class="emoji_icon">
															<vueEmoji class="vueEmoji" @select="selectEmoji" v-if="r_showEmoji"></vueEmoji>
														</div>
														<el-button type="primary" @click="post_words(item1.id,1)">回复</el-button>
													</div>
												</div>
												<!-- </el-collapse-transition> -->
											</div>
											<!-- -->
											<ul>
												<li v-for="(item2, index2) in item1.children" :key="index2">
													<div class="post-reviewer-info">
														<div class="post-reviewer post-person clear">
															<router-link to="###">
																<img class="post-person-img" :src="BASE_URL + item2.avatar_path" v-if="item2.avatar_path !== ''">
																<img class="post-person-img" v-else src="../../../../public/images/user_preview-1.png">
															</router-link>
															<span class="post-r-name">{{item2.create_name}}</span>
															<span class="post-r-recall">回复
																<i>{{item1.create_name}} ：</i>
															</span>
															<span class="post-r-time fr">{{item2.create_time}}</span>
														</div>
														<div class="post-person-word post-r-word">
															<p v-html="emoji(item2.content)"></p>
														</div>
														<div class="post-person-handle">
															<span>
																<i v-if="item2.is_fav==0" class="ipm p-pride-img" @click="to_praise(item2.id)"></i>
																<i v-if="item2.is_fav==1" class="ipm p-pride-img1" @click="to_praise(item2.id)"></i>
																<i :class="item2.fav_num==0?'p-pride-count1':'p-pride-count0'">{{item2.fav_num}}</i>
															</span>
															<span v-if="item2.create_id!=user_login_id">
																<i class="ipm p-info-img" @click="show_index(item2.id)"></i>
															</span>
															<span>
																<i v-if="item2.create_id==user_login_id||delFlag" class="el-icon-delete p-del" @click="del_your_words(item2.id)"></i>
															</span>
														</div>
														<!-- <el-collapse-transition> -->
														<div class="discuss-area-content" v-show="show3 == item2.id">
															<div class="discuss-area-textarea">
																<el-input type="textarea" :rows="5" resize="none" placeholder="友善讨论，互相鼓励，言之有物，互相学习" v-model.trim="discussWords">
																</el-input>
																<span>
																	<i>{{textareaLen}}</i>/140</span>
															</div>
															<div class="discuss-express-btns clear">
																<div class="emoji_ch box fr">
																	<img @click="emojiOFF(1)" src="../../../../public/images/emojim.png" class="emoji_icon">
																	<vueEmoji class="vueEmoji" @select="selectEmoji" v-if="r_showEmoji"></vueEmoji>
																</div>
																<el-button type="primary" @click="post_words(item2.id,1)">回复</el-button>
															</div>
														</div>
														<!-- </el-collapse-transition> -->
													</div>
													<ul>
														<li v-for="(item3, index3) in item2.children" :key="index3">
															<div class="post-reviewer-info">
																<div class="post-reviewer post-person clear">
																	<router-link to="###">
																		<img class="post-person-img" :src="BASE_URL + item3.avatar_path" v-if="item3.avatar_path !== ''">
																		<img class="post-person-img" v-else src="../../../../public/images/user_preview-1.png">
																	</router-link>
																	<span class="post-r-name">{{item3.create_name}}</span>
																	<span class="post-r-recall">回复
																		<i>{{item2.create_name}} ：</i>
																	</span>
																	<span class="post-r-time fr">{{item3.create_time}}</span>
																</div>
																<div class="post-person-word post-r-word">
																	<p v-html="emoji(item3.content)"></p>
																</div>
																<div class="post-person-handle">
																	<span>
																		<i v-if="item3.is_fav==0" class="ipm p-pride-img" @click="to_praise(item3.id)"></i>
																		<i v-if="item3.is_fav==1" class="ipm p-pride-img1" @click="to_praise(item3.id)"></i>
																		<i :class="item3.fav_num==0?'p-pride-count1':'p-pride-count0'">{{item3.fav_num}}</i>
																	</span>
																	<span>
																		<i v-if="item3.create_id==user_login_id||delFlag" class="el-icon-delete p-del" @click="del_your_words(item3.id)"></i>
																	</span>
																</div>

															</div>
														</li>
													</ul>
												</li>
											</ul>
											<!-- -->
										</li>
									</ul>
								</template>

							</li>
						</ul>
					</div>

				</div>
			</div>
			<div class="post-details-r">
				<h3>附件({{resource_data.length}})</h3>
				<div>
					<ul>
						<li class="post-details-r-li" v-for="(item,index) in resource_data" :key="index">
							<img :src="BASE_URL+'/static/index/images/format/resourceicon'+item.file_type+'.png'" alt="图片">
							<span class="details-li-tit" :title="`${item.name}.${item.postfix}`"> {{item.name}}.{{item.postfix}}</span>
							<el-button @click="viewResource(item)" type="text">预览</el-button>
							<el-button @click="download_resource(item.id)" type="text">下载</el-button>
						</li>
						<div class="placeholder-post" v-if="resource_data.length==0">
							<i class="ipng couse01"></i>
							<span>暂时没有帖子附件</span>
						</div>
					</ul>
				</div>
			</div>
		</div>
		<transition name="el-fade-in-linear">
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox" v-loading="viewLoading.status" :element-loading-text="viewLoading.txt">
					<div class="masking_h clear">
						<span>视频预览</span>
						<i class="el-icon-close fr" @click="viewClose"></i>
					</div>
					<div class="masking_c">
						<nativeVideo v-if="showVideoPlayer" :playParam.sync="playParam">
						</nativeVideo>
					</div>
				</div>
			</div>
		</transition>
		<transition name="el-fade-in-linear" lock-scroll="false">
			<div class="masking" :class="{ activeLive: isPDFActive }">
				<div class="maskingBox">
					<div class="masking_h clear">
						<span>文档预览</span>
						<i class="el-icon-close fr" @click="viewPDFClose"></i>
					</div>
					<div class="masking_c">
						<div>
							<iframe v-if="isPDFActive==false" :src="pdfUrl" style="width:100%;height:450px"></iframe>
						</div>
					</div>
				</div>
			</div>
		</transition>
		<el-dialog title="图片预览" :visible.sync="imgVisible" width="auto" style="min-width:550px;" top="0" custom-class="imgVisible"
		 :close-on-click-modal="false">
			<div class="imgViewx">
				<img :src="imgViewUrl" alt="">
			</div>
		</el-dialog>
		<el-dialog title="音频预览" :visible.sync="voiceVisible" width="auto" style="min-width:550px;" top="0" custom-class="imgVisible"
		 :close-on-click-modal="false">
			<div class="imgViewx">
				<audio id="voicepoauy" controls="controls" :src="voiceViewUrl" controlsList="nodownload" autoplay>
					Your browser does not support the audio tag.
				</audio>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import nativeVideo from "../../common/nativeVideo";
	import vueEmoji from "../base/emoji";
	export default {
		data() {
			return {
				// error_img: require("../../../../public/images/Group9.png"),
				user_login_id: this.$store.getters.userInfo.id,
				group_id: null,
				post_id: this.$route.query.id,
				create_id: null,
				post_info_data: {},
				//发表评论：
				discussWords0: "", //讨论区默认显示的输入框内容
				textareaLen0: 0, //默认显示的输入框内容长度
				discussWords: "", //评论列表的输入框内容
				textareaLen: 0,
				inputLevel: 0, //0代表默认输入框的，1代表评论列表的输入框
				resource_id: "",
				showEmoji: false,
				r_showEmoji: false,
				discuss_data: [],
				show3: false, //显示评论输入框
				// 附件资源：
				resource_data: [],
				//预览：
				isActive: true,
				isPDFActive: true,
				pdfUrl: "",
				imgVisible: false,
				imgViewUrl: "",
				voiceVisible: false,
				voiceViewUrl: "",
				viewLoading: {
					status: false,
					txt: "加载数据..."
				},
				showVideoPlayer: false,
				playParam: {
					play_url: ""
				}
			};
		},
		created() {
			this.getPostInfo();
			this.addReadCount();
		},
		mounted() {
			console.log(1)
		},
		watch: {
			//判断输入的字符数量
			"discussWords0"(newVal, oldVal) {
				setTimeout(() => {
					if (newVal.length > 140) {
						this.$message.error('输入内容已超过140个字符了哦');
						this.discussWords0 = oldVal;
						this.textareaLen = 140;
					} else {
						this.textareaLen0 = newVal.length;
					}
				}, 300);
			},
			"discussWords"(newVal, oldVal) {
				setTimeout(() => {
					if (newVal.length > 140) {
						this.$message.error('输入内容已超过140个字符了哦');
						this.discussWords = oldVal;
						this.textareaLen = 140;
					} else {
						this.textareaLen = newVal.length;
					}
				}, 300);
			}
		},
		computed: {
			// 判断用户是不是圈组创建者或管理员
			delFlag() {
				let roleData = this.$store.getters.userInfo.rolebaseid;
				let arr = roleData.filter(x => [1, 2, 3].includes(x));
				let flag = this.post_info_data.create_id == this.user_login_id;
				console.log(arr, flag)
				return arr.length > 0 || flag;
			}
		},
		methods: {
			// 添加阅读数量
			addReadCount() {
				let success = res => {};
				this.$ajax({
					url: "api/group/add_chat_clicks",
					method: "post",
					data: {
						id: this.post_id
					},
					func: {
						success: success
					}
				});
			},
			show_index(val) {
				if (val === this.show3) {
					this.show3 = null;
				} else {
					this.show3 = val;
				}
			},
			getPostInfo() {
				let _params = {
					pid: 0,
					page_index: 1,
					page_size: 10,
					order: "create_time", //create_time,clicks
					drection: "DESC", //正序DESC，反序不填
					is_tree: 1, //是否获取下级（1是，0不是,不发不是）
					id: this.post_id, //讨论id
				};
				let success = res => {
					//获取帖子信息:
					this.group_id = res.data.data[0].group_id;
					this.create_id = res.data.data[0].create_id;
					this.post_info_data = res.data.data[0];
					this.resource_id = res.data.data[0].resource_id;
					let r_data = res.data.data[0].resource;
					if (r_data != undefined) {
						this.resource_data = r_data;
					}
					//获取评论内容：
					this.discuss_data = res.data.data[0].children; //帖子信息pid:0,下面的评论首层数据是第一个children，pid是帖子信息的评论id
				};
				this.$ajax.get("api/group/subject_group_chat", {
					params: _params,
					func: {
						success: success
					}
				});
			},
			/**  显示表情
			 * level ,值为0默认输入框的表情，1是评论列表里输入框的表情
			 */
			emojiOFF(level) {
				this.inputLevel = level;
				if (level == 0) {
					this.showEmoji = !this.showEmoji;
				} else {
					this.r_showEmoji = !this.r_showEmoji;
				}
			},
			// 选中表情
			selectEmoji(code) {
				this.showEmoji = false;
				this.r_showEmoji = false;
				this.inputLevel == 0 ? (this.discussWords0 += code) : (this.discussWords += code);
			},
			//发表评论：
			/** 
			 * _pid当前这条评论的id
			 * _level，0讨论区默认显示的第一个输入框，1指评论列表里面的输入框
			 */
			post_words(_pid, _level) {
				if ((_level == 0 && this.discussWords0 == '') || (_level != 0 && this.discussWords == '')) {
					this.$message.warning("评论内容不能为空");
					return;
				}

				let success = res => {
					this.getPostInfo();
					res.code == 200 ? (this.$message.success(res.msg)) : (this.$message.warning(res.msg));
					_level == 0 ? (this.discussWords0 = "") : (this.discussWords = "");
					if (_pid === this.show3) {
						this.show3 = null;
					} else {
						this.show3 = _pid;
					}
				};
				this.$ajax({
					url: "api/group/subject_group_chat",
					method: "post",
					data: {
						title: "",
						content: _level == 0 ? this.discussWords0 : this.discussWords,
						pid: _pid,
						resource_id: this.resource_id,
						group_id: this.group_id,
						gpid: this.post_id
					},
					func: {
						success: success
					}
				});
			},
			//删除评论：
			del_your_words(id) {
				this.$confirm("确定删除吗?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
						customClass: "confirm-them"
					})
					.then(() => {
						this.sure_del_words(id);
					})
					.catch(() => {});
			},
			sure_del_words(_id) {
				// console.log(_id);
				let success = res => {
					this.getPostInfo();
					this.$message.success("成功删除评论");
				};
				this.$ajax({
					url: "api/group/subject_group_chat",
					method: "put",
					data: {
						id: _id,
						status: 0
					},
					func: {
						success: success
					}
				});
			},
			//点赞
			to_praise(_id, pid) {
				let success = res => {
					this.getPostInfo();
				};
				this.$ajax({
					url: "api/group/add_chat_fas",
					method: "post",
					data: {
						id: _id,
						gpid: pid == undefined ? this.post_id : pid
					},
					func: {
						success: success
					}
				});
			},

			error: function(err) {
				//this.$message.error('读取文件失败');
			},
			//资源预览转发
			viewResource(obj) {
				console.log(obj)
				this.viewLoading.status = true;
				let success = data => {
					var result = data.data;
					if (parseInt(result.file_type) === 6) {
						//视频预览
						this.isActive = false;
						this.videoView(result.path);
					} else if (parseInt(result.file_type) === 3) {
						//图片预览
						this.imgVisible = true;
						this.imgView(result.path);
					} else if (parseInt(result.file_type) === 1) {
						//文档预览
						this.isPDFActive = false;
						this.pdfView(result.path);
					} else if (parseInt(result.file_type) === 5) {
						//音频预览
						this.voiceVisible = true;
						this.voiceView(result.path);
					} else {
						this.$message.warning("不支持预览的资源类型");
					}
				};
				let fail = data => {
					this.viewLoading.status = false;
					this.$message.error(data.msg);
				};
				this.$ajax.get("api/resource/view_info", {
					params: {
						id: obj.id,
						is_video: obj.is_video
					},
					func: {
						success: success,
						fail: fail
					}
				});
			},
			voiceView(url) {
				this.voiceViewUrl = url;
				document.getElementById("voicepoauy").load();
			},
			imgView(url) {
				this.imgViewUrl = url;
			},
			//pdf预览
			pdfView(url) {
				this.isPDFActive = false;
				this.pdfUrl = url;
			},
			viewPDFClose() {
				this.isPDFActive = true;
			},
			//关闭视频预览
			viewClose() {
				this.showVideoPlayer = false;
				this.isActive = true;
			},
			//视频预览
			videoView(url) {
				this.showVideoPlayer = true;
				this.playParam.play_url = url;
			},
			download_resource(resource_id) {
				window.location.href =
					this.BASE_URL +
					"/index/resource/resourcedownload?id=" +
					resource_id;
			},
			goback() {
				this.$router.push({
					path: '/group/postsList',
					query: {
						id: this.group_id,
						create_id: this.create_id
					}
				});
			}
		},
		components: {
			vueEmoji,
			nativeVideo
		}
	};
</script>
<style lang="scss">
	.class-list .course-content-list-icon {
		display: inline-block;
		width: 40px;
		height: 32px;
		background: url("../../../../public/images/ipng.png") 36px 642px;
	}

	.class-list .el-icon-arrow-down {
		font-size: 16px;
	}

	.masking {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: 0.5s;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9999999999;

		.maskingBox {
			position: absolute;
			top: 15%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}

		.masking_h {
			padding: 10px;
			background: #348efc;
			text-align: center;
			text-align-last: justify;

			>span,
			>i {
				font-size: 16px;
				text-align-last: initial;
				display: inline-block;
				vertical-align: middle;
				color: #fff;
			}

			>i {
				cursor: pointer;
			}
		}
	}

	.pdfView {
		max-height: 550px;
		overflow: hidden;
		overflow-y: auto;
		z-index: 3;
	}

	.masking_c {
		height: 450px;
		padding: 10px;

		.el-pagination {
			padding-bottom: 20px;
		}

		.vjs-big-play-button {
			top: 50% !important;
			left: 50% !important;
		}
	}

	.activeLive {
		opacity: 0;
		visibility: hidden;
	}

	.imgVisible {
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		min-width: 550px;
		min-height: 550px;
		background-color: #fff;
		margin: 0;

		.el-dialog__header {
			background-color: #348efc;
			padding: 20px;

			span,
			i {
				color: #fff;
			}

			i {
				font-size: 20px;
			}

			i:hover {
				color: #fff;
			}
		}

		.el-dialog__body {
			text-align: center;
			padding: 0;

			img {
				max-width: 100%;
				margin: 0 auto;
			}
		}
	}

	.el-dialog__wrapper {
		text-align: center;
	}

	.read-box {
		padding: 10px 0;

		span {
			vertical-align: middle;
			font-size: 14px;

			i {
				vertical-align: middle;
				padding-right: 5px;
			}
		}
	}
</style>
